<template>
  <div class="app-content">
    <div v-if="ua === 'weixin'" class="tips-wraper">
      <div class="tips">
        <div class="tips-text">
          <div>点击右上角</div>
          <div>选择在浏览器中打开</div>
        </div>
        <div class="tips-icon">
          <img src="./iocn/tips-icon.png" width="60" alt="" />
        </div>
      </div>
    </div>
    <div class="top">
      <img src="./iocn/logo.png" width="80" alt="" />
    </div>
    <div class="btn-wraper">
      <div class="btn" @click="dowmloadApp">点击下载APP</div>
    </div>
  </div>
</template>

<script setup name="appDownload">
import axios from "axios";

let ua = ref("");
let browser = {
  versions: (function () {
    let u = navigator.userAgent
    return {
      //移动终端浏览器版本信息
      trident: u.indexOf("Trident") > -1, //IE内核
      presto: u.indexOf("Presto") > -1, //opera内核
      webKit: u.indexOf("AppleWebKit") > -1, //苹果、谷歌内核
      gecko: u.indexOf("Gecko") > -1 && u.indexOf("KHTML") == -1, //火狐内核
      mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
      ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
      android: u.indexOf("Android") > -1 || u.indexOf("Linux") > -1, //android终端或uc浏览器
      iPhone: u.indexOf("iPhone") > -1, //是否为iPhone或者QQHD浏览器
      iPad: u.indexOf("iPad") > -1, //是否iPad
      webApp: u.indexOf("Safari") == -1, //是否web应该程序，没有头部与底部
    };
  })(),
  language: (navigator.browserLanguage || navigator.language).toLowerCase(),
};
if (browser.versions.mobile) {
  //判断是否是移动设备打开。browser代码在下面
  let ua = navigator.userAgent.toLowerCase(); //获取判断用的对象
  if (ua.match(/MicroMessenger/i) == "micromessenger") {
    //在微信中打开
    ua.value = "weixin";
  }
  if (ua.match(/WeiBo/i) == "weibo") {
    //在新浪微博客户端打开
    ua.value = "weibo";
  }
  if (ua.match(/QQ/i) == "qq") {
    //在QQ空间打开
    ua.value = "qq";
  }
} else {
  //否则就是PC浏览器打开
  ua.value = "pc";
}

function dowmloadApp() {
  let data = decodeURIComponent(getUrlKey("name"));
  axios({
    method: "get",
    url: "/pub/downloadApp/" + data,
    responseType: "blob",
  }).then((res) => {
    if (res && res.success === false) {
      return;
    }
    let blob = res.data;
    let urlL = window.URL.createObjectURL(new Blob([blob]));
    let link = document.createElement("a");
    link.href = urlL;
    link.download = data;
    link.click();
  });
}
function getUrlKey(name) {
  //获取url 参数
  return (
    decodeURIComponent(
      (new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
        location.href
      ) || [, ""])[1].replace(/\+/g, "%20")
    ) || null
  );
}
</script>

<style scoped lang="scss">
body {
  padding: 0;
  margin: 0;
}
.app-content {
  width: 100%;
  height: 100%;
  background: #ffffff;
  .tips-wraper {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.507);
    .tips {
      position: absolute;
      right: 20px;
      top: 10px;
      display: flex;
      align-items: flex-end;
      color: #ffffff;
    }
  }
  .top {
    width: 100%;
    padding-top: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .btn-wraper {
    width: 100%;
    padding-top: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    .btn {
      width: 75%;
      height: 38px;
      font-size: 16px;
      border-radius: 5px;
      background-color: #6dc1a9;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
